<?php
$p = \Yii::$app->controller->module->templateAsset."/meiguizhilian/";
?>

<style type="text/css">

.showwords 
{
    font-size: 23px;
    color: black;
    position: absolute;
    z-index: 1;
    top: 85%;
    margin: -39px;
    left: 39px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 5px;
    /*background-color: rgba(255, 255, 255, 0.53);*/
    text-shadow: 6px 6px 20px white, -6px 6px 20px white, -6px -6px 20px white, 6px -6px 20px white;
    /*border-radius: 40px;*/
}
    
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

html,body,.main-body
{
    background-color: white;
     height:100%;
}

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#container > div, #container > img
{
    position: absolute;
}
.page
{
    position: absolute;
    width: 500px;
    height: 815px;
}
.page > div,.page > img
{
    position: absolute;
}
#love520
{
    left: 162px;
    top: 137px;
}
#dai1
{
    left: 73px;
    top: 324px;
    -webkit-clip-path: polygon(50% 0%,50% 100%,50% 100%,50% 0%);
}
#heart1
{
    -webkit-transform: translate(-21px,333px) scale(0.8);
}
#heart2
{
    -webkit-transform: translate(74px,334px) scale(0.8);
}
#heart3
{
    -webkit-transform: translate(172px, 326px) scale(0.8);
}
#heart4
{
    -webkit-transform: translate(272px, 331px) scale(0.75);
}
#heart5
{
    -webkit-transform: translate(381px,332px) scale(0.8);
}
.kuang1v
{
    position: absolute;
    left: 44px;
    top: 182px;
}
#img1v
{
    left: 74px;
    top: 218px;
    width: 355px;
    height: 456px;
    position: absolute;
    overflow: hidden;
}
.kuang1h
{
    position: absolute;
    left: 34px;
    top: 182px;
    -webkit-transform: rotate(90deg);
}
#img1h
{
    left: 19px;
    top: 269px;
    width: 457px;
    height: 354px;
    position: absolute;
    overflow: hidden;
}
#page1
{
    display: none;
    -webkit-transform: translate(0px,0px) rotate(0deg);
}
#dai2
{
    position: absolute;
    left: 20px;
    top: 319px;
}
.kuang21h
{
    left: 9px;
    top: 0px;
    position: absolute;
}
.kuang22h
{
    left: 20px;
    top: 307px;
    position: absolute;
}
#img21h
{
    position: absolute;
    width: 383px;
    height: 275px;
    left: 68px;
    top: 79px;
    -webkit-transform: rotate(-3deg);
    overflow: hidden;
}
#img22h
{
    position: absolute;
    width: 383px;
    height: 275px;
    left: 59px;
    top: 424px;
    -webkit-transform: rotate(5deg);
    overflow: hidden;
}
.kuang21v
{
    left: -33px;
    top: -18px;
    position: absolute;
    -webkit-transform: rotate(90deg);
}
.kuang22v
{
    left: 65px;
    top: 307px;
    position: absolute;
    -webkit-transform: rotate(-90deg);
}
#img21v
{
    position: absolute;
    width: 270px;
    height: 382px;
    left: 75px;
    top: 29px;
    -webkit-transform: rotate(-3deg);
    overflow: hidden;
}
#img22v
{
    position: absolute;
    width: 273px;
    height: 370px;
    left: 192px;
    top: 367px;
    -webkit-transform: rotate(5deg);
    overflow: hidden;
}
.div
{
    position: absolute;
    width: 500px;
    height: 815px;
}
.kuang3v
{
    left: 2px;
    top: 150px;
    position: absolute;
}
.dai3v
{
    left: 25px;
    top: 615px;
    position: absolute;
}
.kuang3h
{
    left: 31px;
    top: 157px;
    position: absolute;
    width: 450px;
    -webkit-transform: translate(0px,0px) rotate(90deg);
}
.dai3h
{
    left: 6px;
    top: 553px;
    position: absolute;
}
#img3h
{
    width: 406px;
    height: 314px;
    background-color: #9c9c9c;
    position: absolute;
    left: 44px;
    top: 246px;
    overflow: hidden;
}
#img3v
{
    width: 351px;
    height: 437px;
    background-color: #9c9c9c;
    position: absolute;
    left: 85px;
    top: 202px;
    overflow: hidden;
}
#en3
{
    left: 200px;
    top: 689px;

}
#dai4
{
    left: 10px;
    top: 29px;
}
.kuang41h
{
    left: 91px;
    top: 0px;
    -webkit-transform: rotate(84deg);
    position: absolute;
    width: 312px;
}
.kuang42h
{
    left: 89px;
    top: 317px;
    -webkit-transform: rotate(95deg) scale(1,-1);
    position: absolute;
    width: 334px;
}
#img41h
{
    width: 335px;
    height: 261px;
    background-color: #9c9c9c;
    left: 86px;
    top: 66px;
    position: absolute;
    -webkit-transform: rotate(-7deg);
    overflow: hidden;
}
#img42h
{
    width: 351px;
    height: 281px;
    background-color: #9c9c9c;
    left: 77px;
    top: 386px;
    position: absolute;
    -webkit-transform: rotate(6deg);
    overflow: hidden;
}

.kuang41v
{
    left: 53px;
    top: 31px;
    -webkit-transform: rotate(-7deg);
    position: absolute;
    width: 300px;
}
.kuang42v
{
    left: 166px;
    top: 353px;
    -webkit-transform: rotate(10deg);
    position: absolute;
    width: 298px;
}
#img41v
{
    width: 254px;
    height: 321px;
    background-color: #9c9c9c;
    left: 72px;
    top: 56px;
    position: absolute;
    -webkit-transform: rotate(-7deg);
    overflow: hidden;
}
#img42v
{
    width: 252px;
    height: 315px;
    background-color: #9c9c9c;
    left: 191px;
    top: 380px;
    position: absolute;
    -webkit-transform: rotate(9deg);
    overflow: hidden;
}
#en4
{
    left: 162px;
    top: 699px;
}
#en5
{
    left: 184px;
    top: 650px;
}
#dai5
{
    position: absolute;
    left: 16px;
    top: 553px;
}
.kuang5v
{
    left: 2px;
    top: 93px;
    position: absolute;
}
#img5v
{
    position: absolute;
    left: 82px;
    top: 143px;
    width: 349px;
    height: 439px;
    background-color: #9c9c9c;
    -webkit-transform: rotate(-2deg);
    overflow: hidden;
}
.kuang5h
{
    left: 27px;
    top: 150px;
    position: absolute;
    width: 465px;
    -webkit-transform: rotate(90deg);
}
#img5h
{
    position: absolute;
    left: 48px;
    top: 236px;
    width: 414px;
    height: 330px;
    background-color: #9c9c9c;
    -webkit-transform: rotate(-2deg);
    overflow: hidden;
}
#en61
{
    left: 343px;
    top: 292px;
}
#en62
{
    left: 51px;
    top: 470px;
}
#img61h
{
    left: 29px;
    top: 135px;
    background-color: #9c9c9c;
    width: 319px;
    height: 221px;
    position: absolute;
    -webkit-transform: rotate(-6deg);
    overflow: hidden;
}
#img62h
{
    left: 154px;
    top: 429px;
    background-color: #9c9c9c;
    width: 322px;
    height: 232px;
    position: absolute;
    -webkit-transform: rotate(8deg);
    overflow: hidden;
}
.kuang61h
{
    left: -19px;
    top: 60px;
    -webkit-transform: rotate(-2deg);
    position: absolute;
    width: 400px;
}
.kuang62h
{
    left: 92px;
    top: 354px;
    -webkit-transform: rotate(9deg);
    position: absolute;
    width: 418px;
}
.dai6
{
    left: 79px;
    top: 374px;
    position: absolute;
}
#img61v
{
    left: 53px;
    top: 92px;
    background-color: #9c9c9c;
    width: 243px;
    height: 318px;
    position: absolute;
    -webkit-transform: rotate(-5deg);
    overflow: hidden;
}
#img62v
{
    left: 208px;
    top: 397px;
    background-color: #9c9c9c;
    width: 240px;
    height: 315px;
    position: absolute;
    -webkit-transform: rotate(1deg);
    overflow: hidden;
}
.kuang61v
{
    left: -19px;
    top: 57px;
    -webkit-transform: rotate(-92deg);
    position: absolute;
    width: 403px;
    height: 411px;
}
.kuang62v
{
    left: 116px;
    top: 347px;
    -webkit-transform: rotate(95deg);
    position: absolute;
    width: 407px;
    height: 391px;
}
.dai6v
{
    left: 148px;
    top: 341px;
    position: absolute;
}
</style>
<style type="text/css">
@-webkit-keyframes beat1
{
    from  {-webkit-transform: translate(-21px,333px) scale(0.8);}
    to    {-webkit-transform: translate(-21px,333px) scale(1);}
}
@-webkit-keyframes beat2
{
    from  {-webkit-transform: translate(74px,334px) scale(0.8);}
    to    {-webkit-transform: translate(74px,334px) scale(1);}
}
@-webkit-keyframes beat3
{
    from  {-webkit-transform: translate(172px, 326px) scale(0.8);}
    to    {-webkit-transform: translate(172px, 326px) scale(1);}
}
@-webkit-keyframes beat4
{
    from  {-webkit-transform: translate(272px, 331px) scale(0.75);}
    to    {-webkit-transform: translate(272px, 331px) scale(1);}
}
@-webkit-keyframes beat5
{
    from  {-webkit-transform: translate(381px,332px) scale(0.8);}
    to    {-webkit-transform: translate(381px,332px) scale(1);}
}
@-webkit-keyframes p1_1
{
    from  {-webkit-transform: translate(-21px,333px) scale(0.8);}
    to    {-webkit-transform: translate(-65px,22px) scale(1) rotate(16.7deg);}
}
@-webkit-keyframes p2_1
{
    from  {-webkit-transform: translate(-65px,22px) scale(1) rotate(16.7deg);}
    to    {-webkit-transform: translate(391px,718px) scale(0.8) rotate(16.7deg);}
}
@-webkit-keyframes p3_1
{
    from  {-webkit-transform: translate(391px,718px) scale(0.8) rotate(16.7deg);}
    to    {-webkit-transform: translate(373px,672px) scale(0.8) rotate(16.4deg);}
}
@-webkit-keyframes p4_1
{
    from  {-webkit-transform: translate(373px,672px) scale(0.8) rotate(16.4deg);}
    to    {-webkit-transform: translate(368px,689px) scale(1) rotate(16.4deg);}
}
@-webkit-keyframes p5_1
{
    from  {-webkit-transform: translate(368px,689px) scale(1) rotate(16.4deg);}
    to    {-webkit-transform: translate(-54px,32px) scale(1) rotate(16.4deg);}
}
@-webkit-keyframes p6_1
{
    from  {-webkit-transform: translate(-54px,32px) scale(1) rotate(16.4deg);}
    to    {-webkit-transform: translate(-18px,666px) scale(1.1) rotate(16.4deg);}
}
@-webkit-keyframes p0_1
{
    from  {-webkit-transform: translate(-18px,666px) scale(1.1) rotate(16.4deg);}
    to    {-webkit-transform: translate(-65px,22px) scale(1) rotate(16.7deg);}
}
@-webkit-keyframes p1_2
{
    from  {-webkit-transform: translate(74px,334px) scale(0.8);}
    to    {-webkit-transform: translate(429px,90px) scale(1) rotate(-21deg);}
}
@-webkit-keyframes p2_2
{
    from  {-webkit-transform: translate(429px,90px) scale(1) rotate(-21deg);}
    to    {-webkit-transform: translate(410px,335px) scale(0.8) rotate(-42deg);}
}
@-webkit-keyframes p3_2
{
    from  {-webkit-transform: translate(410px,335px) scale(0.8) rotate(-42deg);}
    to    {-webkit-transform: translate(-33px,42px) scale(0.9) rotate(-17.7deg);}
}
@-webkit-keyframes p4_2
{
    0%    {-webkit-transform: translate(-33px,42px) scale(0.9) rotate(-17.7deg);opacity: 1}
    10%   {-webkit-transform: translate(-33px,42px) scale(1) rotate(-17.7deg);opacity: 1}
    100%  {-webkit-transform: translate(-33px,42px) scale(0.2) rotate(-17.7deg);opacity: 0}
}
@-webkit-keyframes p5_2
{
    from  {-webkit-transform: translate(331px,-200px);}
    to    {-webkit-transform: translate(331px,-47px) rotate(29.8deg);}
}
@-webkit-keyframes p6_2
{
    from  {-webkit-transform: translate(331px,-47px) rotate(29.8deg) scale(1);opacity: 1}
    to    {-webkit-transform: translate(331px,-47px) rotate(29.8deg) scale(0.5);opacity: 0}
}
@-webkit-keyframes p0_2
{
    from  {-webkit-transform: translate(429px,90px) scale(1) rotate(-21deg);opacity: 0}
    to    {-webkit-transform: translate(429px,90px) scale(1) rotate(-21deg);opacity: 1}
}
@-webkit-keyframes p1_3
{
    from  {-webkit-transform: translate(172px, 326px) scale(0.8);}
    to    {-webkit-transform: translate(399px, 702px) scale(1) rotate(15.4deg);}   
}
@-webkit-keyframes p2_3
{
    from  {-webkit-transform: translate(399px, 702px) scale(1) rotate(15.4deg);}
    to    {-webkit-transform: translate(409px, -13px) scale(0.8) rotate(15.4deg);}
}
@-webkit-keyframes p3_3
{
    from  {-webkit-transform: translate(409px, -13px) scale(0.8) rotate(15.4deg);}
    to    {-webkit-transform: translate(331px,17px) scale(0.8) rotate(27.4deg);}
}
@-webkit-keyframes p4_3
{
    from  {-webkit-transform: translate(331px,17px) scale(0.8) rotate(27.4deg);}
    to    {-webkit-transform: translate(428px,56px) scale(0.8) rotate(-19.7deg);}
}
@-webkit-keyframes p5_3
{
    from  {-webkit-transform: translate(428px,56px) scale(0.8) rotate(-19.7deg);}
    to    {-webkit-transform: translate(428px,388px) scale(0.8) rotate(-19.7deg);}
}
@-webkit-keyframes p6_3
{
    from  {-webkit-transform: translate(428px,388px) scale(0.8) rotate(-19.7deg);}
    to    {-webkit-transform: translate(316px,34px) scale(1) rotate(7.1deg);}
}
@-webkit-keyframes p0_3
{
    from  {-webkit-transform: translate(316px,34px) scale(1) rotate(7.1deg);}
    to    {-webkit-transform: translate(399px, 702px) scale(1) rotate(15.4deg);}  
}
@-webkit-keyframes p1_4
{
    from  {-webkit-transform: translate(272px, 331px) scale(0.75);}
    to    {-webkit-transform: translate(14px,698px) scale(1) rotate(-10.4deg);}
}
@-webkit-keyframes p2_4
{
    from  {-webkit-transform: translate(14px,698px) scale(1) rotate(-10.4deg);}
    to    {-webkit-transform: translate(-22px,664px) scale(0.7) rotate(-13deg);}
}
@-webkit-keyframes p3_4
{
    from  {-webkit-transform: translate(-22px,664px) scale(0.7) rotate(-13deg);}
    to    {-webkit-transform: translate(27px,705px) scale(1) rotate(-13.8deg);}
}
@-webkit-keyframes p4_4
{
    from  {-webkit-transform: translate(27px,705px) scale(1) rotate(-13.8deg);}
    to    {-webkit-transform: translate(5px,660px) scale(0.9) rotate(-13.8deg);}
}
@-webkit-keyframes p5_4
{
    from  {-webkit-transform: translate(5px,660px) scale(0.9) rotate(-13.8deg);}
    to    {-webkit-transform: translate(3px,645px) scale(0.85) rotate(-13.8deg);}
}
@-webkit-keyframes p6_4
{
    from  {-webkit-transform: translate(3px,645px) scale(0.85) rotate(-13.8deg);}
    to    {-webkit-transform: translate(363px,674px) scale(0.8) rotate(-13.8deg);}
}
@-webkit-keyframes p0_4
{
    from  {-webkit-transform: translate(363px,674px) scale(0.8) rotate(-13.8deg);}
    to    {-webkit-transform: translate(14px,698px) scale(1) rotate(-10.4deg);}
}
@-webkit-keyframes p1_5
{
    from  {-webkit-transform: translate(381px,332px) scale(0.8);}
    to    {-webkit-transform: translate(325px,-75px) scale(1) rotate(10.8deg);}
}
@-webkit-keyframes p2_5
{
    from  {-webkit-transform: translate(325px,-75px) scale(1) rotate(10.8deg);}
    to    {-webkit-transform: translate(-42px,-29px) scale(0.8) rotate(10.8deg);}
}
@-webkit-keyframes p3_5
{
    from  {-webkit-transform: translate(-42px,-29px) scale(0.8) rotate(10.8deg);}
    to    {-webkit-transform: translate(397px,20px) scale(1.1) rotate(11.3deg);}
}
@-webkit-keyframes p4_5
{
    from  {-webkit-transform: translate(397px,20px) scale(1.1) rotate(11.3deg);}
    to    {-webkit-transform: translate(-47px,244px) scale(0.8) rotate(-22.1deg);}
}
@-webkit-keyframes p5_5
{
    from  {-webkit-transform: translate(-47px,244px) scale(0.8) rotate(-22.1deg);}
    to    {-webkit-transform: translate(350px,724px) scale(1.2) rotate(6.6deg);}
}
@-webkit-keyframes p6_5
{
    from  {-webkit-transform: translate(350px,724px) scale(1.2) rotate(6.6deg);}
    to    {-webkit-transform: translate(370px,76px) scale(0.75) rotate(-11.6deg);}
}
@-webkit-keyframes p0_5
{
    from  {-webkit-transform: translate(370px,76px) scale(0.75) rotate(-11.6deg);}
    to    {-webkit-transform: translate(325px,-75px) scale(1) rotate(10.8deg);}
}
@-webkit-keyframes dai1-in
{
    0%   {-webkit-clip-path: polygon(180px 0px,180px 146px,180px 146px,180px 0px);}
    50%  {-webkit-clip-path: polygon(0px 0px,0px 146px,357px 146px,357px 0px);}
    100% {-webkit-clip-path: polygon(0px 0px,0px 146px,357px 146px,357px 0px);}
}
@-webkit-keyframes title_in
{
    from  {-webkit-transform: translate(0px,30px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes title_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,30px);opacity: 0}
}
@-webkit-keyframes title_in1
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,100px);}
}
@-webkit-keyframes p1_6
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,-91px);}
}
@-webkit-keyframes show1_1
{
    from  {-webkit-transform: translate(0px,-191px);opacity: 0}
    to    {-webkit-transform: translate(0px,-91px);opacity: 1}
}
@-webkit-keyframes show1_2
{
    from  {-webkit-transform: translate(0px,-324px);opacity: 0}
    to    {-webkit-transform: translate(0px,-224px);opacity: 1}
}
@-webkit-keyframes show1_3
{
    from  {-webkit-transform: translate(0px,100px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes p1_7
{
    from  {-webkit-transform: translate(0px,100px);}
    to    {-webkit-transform: translate(0px,-224px);}
}
@-webkit-keyframes div1_in
{
    from  {opacity: 0;-webkit-transform: translate(0px,-20px);}
    to    {opacity: 1;-webkit-transfrom: translate(0px,0px);}
}

@-webkit-keyframes div1_out
{
    from  {opacity: 1;-webkit-transform: translate(0px,0px);}
    to    {opacity: 0;-webkit-transform: translate(-360px,94px) rotate(-22deg);}
}
@-webkit-keyframes out1_520
{
    from   {-webkit-transform: translate(0px,-91px) scale(1);opacity: 1}
    to     {-webkit-transform: translate(0px,-91px) scale(1.2);opacity: 0}
}
@-webkit-keyframes in3_520
{
    from  {-webkit-transform: translate(-28px,-130px);opacity: 0}
    to    {-webkit-transform: translate(-28px,-96px);opacity: 1}
}
@-webkit-keyframes out3_520
{
    from  {-webkit-transform: translate(-28px,-96px);opacity: 1}
    to    {-webkit-transform: translate(-28px,-130px);opacity: 0}
}
@-webkit-keyframes out1_dai1
{
    from   {-webkit-transform: translate(0px,-224px) scale(1);opacity: 1 }
    to     {-webkit-transform: translate(0px,-224px) scale(1.2);opacity: 0}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes div21_in
{
    from  {-webkit-transform: translate(-281px,-65px) rotate(18deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes div21_out
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    to    {-webkit-transform: translate(100px,-102px) rotate(-9deg);opacity: 0}
}
@-webkit-keyframes div22_in
{
    from  {-webkit-transform: translate(272px,87px) rotate(17deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes div22_out
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    to    {-webkit-transform:  translate(-177px,46px) rotate(-17deg);opacity: 0}
}
@-webkit-keyframes dai2_in
{
    from  {-webkit-transform: translate(-50px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes dai2_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-50px,0px);opacity: 0}
}
@-webkit-keyframes aa_in_bounce_center
{
    0%{
        opacity:0;
        -webkit-transform:scale(.3)
    }
    50%{
        opacity:1;
        -webkit-transform:scale(1.05)
    }
    70%{
        -webkit-transform:scale(.9)
    }
    100%{
        -webkit-transform:scale(1)
    }
}
@-webkit-keyframes aa_out_bounce_center
{
    0%{
        -webkit-transform:scale(1)
    }
    25%{
        -webkit-transform:scale(.95)
    }
    50%{
        opacity:1;
        -webkit-transform:scale(1.1)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(.3)
    }
}
@-webkit-keyframes in_en3
{
    from  {-webkit-transform: translate(50px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes out_en3
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(50px,0px);opacity: 0}
}
@-webkit-keyframes div41_in
{
    from  {-webkit-transform: translate(142px,-146px) rotate(-25deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div41_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-156px,273px) rotate(18deg);opacity: 0}
}
@-webkit-keyframes div42_in
{
    from  {-webkit-transform: translate(-184px,300px) rotate(-50deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div42_out
{
    from  {-webkit-transform: translate(0px,-0px);opacity: 1}
    to    {-webkit-transform: translate(170px,-288px) rotate(12deg);opacity: 0}
}
@-webkit-keyframes dai4_in
{
    from  {-webkit-transform: translate(0px,-200px);}
    to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes dai4_out
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,-400px);}
}
@-webkit-keyframes div5_in
{
    from  {-webkit-transform: translate(-100px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div5_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(100px,0px);opacity: 0}
}
@-webkit-keyframes dai5_in
{
    from  {-webkit-transform: scale(1.5);opacity: 0}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes dai5_out
{
    from  {-webkit-transform: scale(1);opacity: 1}
    to    {-webkit-transform: scale(1.5);opacity: 0}
}
@-webkit-keyframes div61_in
{
    from  {-webkit-transform: translate(70px,129px) rotate(3deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div61_out
{
    to    {-webkit-transform: translate(70px,129px) rotate(3deg);opacity: 0}
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div62_in
{
    from  {-webkit-transform: translate(-69px,-167px) rotate(-2deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div62_out
{
    to    {-webkit-transform: translate(-69px,-167px) rotate(-2deg);opacity: 0}
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes left_in
{
    from  {-webkit-transform: translate(-100px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes left_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-100px,0px);opacity: 0}
}
@-webkit-keyframes love_in
{
    from  {-webkit-transform: translate(-243px,388px) scale(0.8);opacity: 0}
    to    {-webkit-transform: translate(-143px,388px) scale(0.8);opacity: 1}
}
@-webkit-keyframes love_out
{
    to    {-webkit-transform: translate(-243px,388px) scale(0.8);opacity: 0}
    from  {-webkit-transform: translate(-143px,388px) scale(0.8);opacity: 1}
}
</style>

<div id='container'>
    <img src='<?=$p?>images/bg.jpg'>
        
    <div id='page1' class='page'>
        <div id='div1v'>
            <div id='img1v'>
                <span id='word1v' class='showwords'></span>
            </div>
            <img class='kuang1v' src='<?=$p?>images/kuang1.png'>
        </div>
        <div id='div1h'>
            <div id='img1h'>
                <span id='word1h' class='showwords'></span>
            </div>
            <img class='kuang1h' src='<?=$p?>images/kuang1.png'>
        </div>
    </div>

    <div id='page2' class='page' style='display:none'>
        <div id='div21h' class='div'>
            <div id='img21h'>
                <span id='word21h' class='showwords'></span>
            </div>
            <img class='kuang21h' src='<?=$p?>images/kuang21.png'>
        </div>
        <div id='div21v' class='div'>
            <div id='img21v'>
                <span id='word21v' class='showwords'></span>
            </div>
            <img class='kuang21v' src='<?=$p?>images/kuang21.png'>
        </div>
        <div id='div22v' class='div'>
            <div id='img22v'>
                <span id='word22v' class='showwords'></span>
            </div>
            <img class='kuang22v' src='<?=$p?>images/kuang22.png'>
        </div>
        <div id='div22h' class='div'>
            <div id='img22h'>
                <span id='word22h' class='showwords'></span>
            </div>
            <img class='kuang22h' src='<?=$p?>images/kuang22.png'>
        </div>
        <img id='dai2' src='<?=$p?>images/dai2.png'>
    </div>

    <div id='page3' class='page'  style='display:none'>
        <div id='div3v' class='div'>
            <div id='img3v'>
                <span id='word3v' class='showwords'></span>
            </div>
            <img class='kuang3v' src='<?=$p?>images/kuang3.png'>
            <img class='dai3v' src='<?=$p?>images/dai3.png'>
        </div>

        <div id='div3h' class='div'>
            <div id='img3h'>
                <span id='word3h' class='showwords'></span>
            </div>
            <img class='kuang3h' src='<?=$p?>images/kuang3.png'>
            <img class='dai3h' src='<?=$p?>images/dai3.png'>
        </div>
        <img id='en3' src='<?=$p?>images/en3.png'>
    </div>

    <div id='page4' class='page' style='display:none'>
        <div id='div41h' class='div'>
            <div id='img41h'>
                <span id='word41h' class='showwords'></span>
            </div>
            <img class='kuang41h' src='<?=$p?>images/kuang1.png'>
        </div>

        <div id='div41v' class='div'>
            <div id='img41v'>
                <span id='word41v' class='showwords'></span>
            </div>
            <img class='kuang41v' src='<?=$p?>images/kuang1.png'>
        </div>
        <div id='div42v' class='div'>
            <div id='img42v'>
                <span id='word42v' class='showwords'></span>
            </div>
            <img class='kuang42v' src='<?=$p?>images/kuang1.png'>
        </div>
        <div id='div42h' class='div'>
            <div id='img42h'>
                <span id='word42h' class='showwords'></span>
            </div>
            <img class='kuang42h' src='<?=$p?>images/kuang1.png'>
        </div>
        <img id='dai4' src='<?=$p?>images/dai4.png'>
        <img id='en4' src='<?=$p?>images/en4.png'>
    </div>

    <div id='page5' class='page'  style='display:none'>
        <div id='div5h'>
            <div id='img5h'>
                <span id='word5h' class='showwords'></span>
            </div>
            <img class='kuang5h' src='<?=$p?>images/kuang3.png'>
        </div>
        <div id='div5v'>
            <div id='img5v'>
                <span id='word5v' class='showwords'></span>
            </div>
            <img class='kuang5v' src='<?=$p?>images/kuang3.png'>
        </div>

        <img id='dai5' src='<?=$p?>images/dai5.png'>
        <img id='en5' src='<?=$p?>images/en5.png'>
    </div>


    <div id='page6' class='page' style='display:none'>
        <img id='en61' src='<?=$p?>images/en61.png'>
        <img id='en62' src='<?=$p?>images/en62.png'>

        <div id='div61h'>
            <div id='img61h'>
                <span id='word61h' class='showwords'></span>
            </div>
            <img class='kuang61h' src='<?=$p?>images/kuang21.png'>
        </div>

        <div id='div61v' class='div'>
            <div id='img61v'>
                <span id='word61v' class='showwords'></span>
            </div>
            <img class='kuang61v' src='<?=$p?>images/kuang21.png'>
        </div>
        <div id='div62v' class='div'>
            <div id='img62v'>
                <span id='word62v' class='showwords'></span>
            </div>
            <img class='kuang62v' src='<?=$p?>images/kuang21.png'>
            <img class='dai6v' src='<?=$p?>images/dai6.png'>
        </div>
        <div id='div62h'>
            <div id='img62h'>
                <span id='word62h' class='showwords'></span>
            </div>
            <img class='kuang62h' src='<?=$p?>images/kuang21.png'>
            <img class='dai6' src='<?=$p?>images/dai6.png'>
        </div>



    </div>

    <div id='pagetitle' style='position:absolute;width:340px;height:226px;top:250px;left:80px;font-size:30px;color:#FF437F;overflow:hidden;line-height:55px;text-shadow: #fff 2px 0 0,#fff 0 2px 0,#fff -2px 0 0,#fff 0 -2px 0;font-weight: bold;opacity:0;'>
        <div style='position:absolute;width:340px;height:226px;top:0px;left:0px;overflow:hidden;'>
            <div style='position:absolute;width:340px;height:226px;display:table;overflow:hidden;'>
                <div id='titlecontent' style='width:340px;height:226px;vertical-align:middle;display:table-cell;text-align:center;'></div>
            </div>
        </div>
    </div>



    <img id='love520' src='<?=$p?>images/520.png'>

    <img id='dai1' src='<?=$p?>images/dai1.png'>
    <img id='heart1' src='<?=$p?>images/11.png'>
    <img id='heart2' src='<?=$p?>images/12.png'>
    <img id='heart4' src='<?=$p?>images/14.png'>
    <img id='heart3' src='<?=$p?>images/13.png'>
    <img id='heart5' src='<?=$p?>images/15.png'>
</div>

<script>
function id(name)
{
    return document.getElementById(name);
}

var get_pid = function(url){
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}

function showtitle()
{
    id('heart1').style.webkitAnimation = 'beat1 0.3s 2 ease-in alternate both';
    id('heart2').style.webkitAnimation = 'beat2 0.3s 2 0.2s ease-in alternate both';
    id('heart3').style.webkitAnimation = 'beat3 0.3s 2 0.4s ease-in alternate both';
    id('heart4').style.webkitAnimation = 'beat4 0.3s 2 0.6s ease-in alternate both';
    id('heart5').style.webkitAnimation = 'beat5 0.3s 2 0.8s ease-in alternate both';

    timeout[1] = setTimeout(function()
    {
        id('heart1').style.webkitAnimation = 'p1_1 2s ease-in-out both';
        id('heart2').style.webkitAnimation = 'p1_2 2s ease-in-out both';
        id('heart3').style.webkitAnimation = 'p1_3 2s ease-in-out both';
        id('heart4').style.webkitAnimation = 'p1_4 2s ease-in-out both';
        id('heart5').style.webkitAnimation = 'p1_5 2s ease-in-out both';
        id('dai1').style.webkitAnimation = 'dai1-in 1.5s 0.5s linear both';

        id('titlecontent').innerHTML = desc;
        id('pagetitle').style.webkitAnimation = 'title_in 1s 2s linear both';

        timeout[2] = setTimeout(function()
        {
            id('dai1').style.webkitClipPath = 'polygon(0px 0px,0px 146px,357px 146px,357px 0px)';
            id('dai1').style.webkitAnimation = 'title_in1 1s ease-out both';

        },2000)
    },1500)
}


function liangziyun_kawa()
{
    setpage(1);
    setImage('1');
    id('page6').style.display = 'none';
    id('dai1').style.webkitAnimation = 'p1_7 2s ease-out both';
    id('love520').style.webkitAnimation = 'p1_6 2s ease-out both';
    id('pagetitle').style.webkitAnimation = 'title_out 0.5s ease-out both';

    id('page1').style.display = 'block';
    id('page1').style.webkitAnimation = 'div1_in 1s 1s ease-out both';
    timeout[3] = setTimeout(show2, 5000)
}


function show2()
{
    setpage(2);
    setImage('21');
    setImage('22');

    id('heart1').style.webkitAnimation = 'p2_1 2s ease-in-out both';
    id('heart2').style.webkitAnimation = 'p2_2 2s ease-in-out both';
    id('heart3').style.webkitAnimation = 'p2_3 2s ease-in-out both';
    id('heart4').style.webkitAnimation = 'p2_4 2s ease-in-out both';
    id('heart5').style.webkitAnimation = 'p2_5 2s ease-in-out both';

    id('love520').style.webkitAnimation = 'out1_520 1s ease-in-out both';
    id('dai1').style.webkitAnimation = 'out1_dai1 1s ease-in-out both';
    id('page1').style.webkitAnimation = 'div1_out 1s ease-in-out both';

    id('page2').style.display = 'block';
    id('pagetitle').style.display = 'block';

    id('dai2').style.webkitAnimation = 'dai2_in 1.5s 1s ease-out both';
    id('div21h').style.webkitAnimation = 'div21_in 1.5s 1s ease-out both';
    id('div22h').style.webkitAnimation = 'div22_in 1.5s 1s ease-out both';
    id('div21v').style.webkitAnimation = 'div21_in 1.5s 1s ease-out both';
    id('div22v').style.webkitAnimation = 'div22_in 1.5s 1s ease-out both';

    timeout[4] = setTimeout(show3,7000)
}

function show3()
{
    setpage(3);
    setImage('3');

    id('dai2').style.webkitAnimation = 'dai2_out 1s linear both';
    id('div21h').style.webkitAnimation = 'div21_out 1s linear both';
    id('div22h').style.webkitAnimation = 'div22_out 1s linear both';
    id('div21v').style.webkitAnimation = 'div21_out 1s linear both';
    id('div22v').style.webkitAnimation = 'div22_out 1s linear both';

    id('heart1').style.webkitAnimation = 'p3_1 2s ease-in-out both';
    id('heart2').style.webkitAnimation = 'p3_2 2s ease-in-out both';
    id('heart3').style.webkitAnimation = 'p3_3 2s ease-in-out both';
    id('heart4').style.webkitAnimation = 'p3_4 2s ease-in-out both';
    id('heart5').style.webkitAnimation = 'p3_5 2s ease-in-out both';

    id('page3').style.display = 'block';
    id('div3v').style.webkitAnimation = 'aa_in_bounce_center 1.5s 1s ease-out both';
    id('div3h').style.webkitAnimation = 'aa_in_bounce_center 1.5s 1s ease-out both';
    id('love520').style.webkitAnimation = 'in3_520 1.5s 1s ease-out both';
    id('en3').style.webkitAnimation = 'in_en3 1.5s 1s ease-out both';


    timeout[5] = setTimeout(show4,5000)
}

function show4()
{
    setpage(4);
    setImage('41');
    setImage('42');

    id('div3v').style.webkitAnimation = 'aa_out_bounce_center 1s ease-out both';
    id('div3h').style.webkitAnimation = 'aa_out_bounce_center 1s ease-out both';
    id('love520').style.webkitAnimation = 'out3_520 1s ease-out both';
    id('en3').style.webkitAnimation = 'out_en3 1s ease-out both';

    id('heart1').style.webkitAnimation = 'p4_1 2s ease-in-out both';
    id('heart2').style.webkitAnimation = 'p4_2 2s ease-in-out both';
    id('heart3').style.webkitAnimation = 'p4_3 2s ease-in-out both';
    id('heart4').style.webkitAnimation = 'p4_4 2s ease-in-out both';
    id('heart5').style.webkitAnimation = 'p4_5 2s ease-in-out both';

    id('page4').style.display = 'block';
    id('div41v').style.webkitAnimation = 'div41_in 1.5s 1s ease-out both';
    id('div42v').style.webkitAnimation = 'div42_in 1.5s 1s ease-out both';
    id('div41h').style.webkitAnimation = 'div41_in 1.5s 1s ease-out both';
    id('div42h').style.webkitAnimation = 'div42_in 1.5s 1s ease-out both';
    id('en4').style.webkitAnimation = 'in_en3 1.5s 1s ease-out both';
    id('dai4').style.webkitAnimation = 'dai4_in 1.5s 1s ease-out both';


    timeout[6] = setTimeout(show5,7000)
}

function show5()
{
    setpage(5);
    setImage('5');

    id('dai4').style.webkitAnimation = 'dai4_out 1s linear both';
    id('en4').style.webkitAnimation = 'out_en3 1.5s linear both';
    id('div41v').style.webkitAnimation = 'div41_out 1.5s linear both';
    id('div42v').style.webkitAnimation = 'div42_out 1.5s linear both';
    id('div41h').style.webkitAnimation = 'div41_out 1.5s linear both';
    id('div42h').style.webkitAnimation = 'div42_out 1.5s linear both';
   
    id('heart1').style.webkitAnimation = 'p5_1 2s ease-in-out both';
    id('heart2').style.webkitAnimation = 'p5_2 2s ease-in-out both';
    id('heart3').style.webkitAnimation = 'p5_3 2s ease-in-out both';
    id('heart4').style.webkitAnimation = 'p5_4 2s ease-in-out both';
    id('heart5').style.webkitAnimation = 'p5_5 2s ease-in-out both';

    id('page5').style.display = 'block';
    id('div5h').style.webkitAnimation = 'div5_in 1.5s 1s ease-out both';
    id('div5v').style.webkitAnimation = 'div5_in 1.5s 1s ease-out both';
    id('dai5').style.webkitAnimation = 'dai5_in 1.5s 2s ease both';
    id('en5').style.webkitAnimation = 'in_en3 1.5s 2s ease-out both';

    timeout[7] = setTimeout(show6, 5000)
}

function show6()
{
    setpage(6);
    setImage('61');
    setImage('62');

    id('en5').style.webkitAnimation = 'out_en3 1.5s linear both';
    id('div5h').style.webkitAnimation = 'div5_out 1.5s linear both';
    id('div5v').style.webkitAnimation = 'div5_out 1.5s linear both';
    id('dai5').style.webkitAnimation = 'dai5_out 1.5s linear both';

    id('heart1').style.webkitAnimation = 'p6_1 2s ease-in-out both';
    id('heart2').style.webkitAnimation = 'p6_2 2s ease-in-out both';
    id('heart3').style.webkitAnimation = 'p6_3 2s ease-in-out both';
    id('heart4').style.webkitAnimation = 'p6_4 2s ease-in-out both';
    id('heart5').style.webkitAnimation = 'p6_5 2s ease-in-out both';

    id('page6').style.display = 'block';
    id('div61v').style.webkitAnimation = 'div61_in 1.5s 1s ease-out both';
    id('div62v').style.webkitAnimation = 'div62_in 1.5s 1s ease-out both';
    id('div61h').style.webkitAnimation = 'div61_in 1.5s 1s ease-out both';
    id('div62h').style.webkitAnimation = 'div62_in 1.5s 1s ease-out both';

    id('en61').style.webkitAnimation = 'in_en3 1.5s 2s ease-out both';
    id('en62').style.webkitAnimation = 'left_in 1.5s 2s ease-out both';
    id('love520').style.webkitAnimation = 'love_in 1.5s 3s ease-out both';

    timeout[8] = setTimeout(show1,7000)
}

function show1()
{
    setpage(1);
    setImage('1');

    console.log(id('page6').style.display);

    id('en61').style.webkitAnimation = 'out_en3 1.5s linear both';
    id('en62').style.webkitAnimation = 'left_out 1.5s linear both';
    id('love520').style.webkitAnimation = 'love_out 1.5s linear both';
    id('div61v').style.webkitAnimation = 'div61_out 1.5s linear both';
    id('div62v').style.webkitAnimation = 'div62_out 1.5s linear both';
    id('div61h').style.webkitAnimation = 'div61_out 1.5s linear both';
    id('div62h').style.webkitAnimation = 'div62_out 1.5s linear both';

    id('heart1').style.webkitAnimation = 'p0_1 2s ease-in-out both';
    id('heart2').style.webkitAnimation = 'p0_2 2s ease-in-out both';
    id('heart3').style.webkitAnimation = 'p0_3 2s ease-in-out both';
    id('heart4').style.webkitAnimation = 'p0_4 2s ease-in-out both';
    id('heart5').style.webkitAnimation = 'p0_5 2s ease-in-out both';

    id('page1').style.webkitAnimation = 'show1_3 1.5s 1s linear both';
    id('love520').style.webkitAnimation = 'show1_1 1.5s 1.5s linear both';
    id('dai1').style.webkitAnimation = 'show1_2 1.5s 1s linear both';

    timeout[9] = setTimeout(show2, 5000)
}


var divwidth  = {'1h':457,'1v':355,'21h':383,'21v':270,'22h':383,'22v':273,'3h':406,'3v':351,'41h':335,'41v':254,'42h':351,'42v':252,'5h': 414,'5v': 349,'61h':319,'61v':243,'62h':322,'62v': 240};
var divheight = {'1h':354,'1v':456,'21h':275,'21v':382,'22h':275,'22v':370,'3h':314,'3v':437,'41h':261,'41v':321,'42h':281,'42v':315,'5h': 330,'5v': 439,'61h':221,'61v':318,'62h':232,'62v': 315};

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div;
    var div1;
    var img;

    if(img_bili > 1)
    {
        div = id('div'+idname + 'h');
        div1 = id('div'+idname + 'v');
        idname = idname + 'h';
    }
    else
    {
        div = id('div'+idname + 'v');
        div1 = id('div'+idname + 'h');
        idname = idname + 'v';
    }

    div.style.display = 'block';
    div1.style.display = 'none';

    var height = divheight[idname];
    var width = divwidth[idname];

    var img = id('img'+idname);
    img.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    // console.log('setimg:'+ img.style.backgroundImage);

    var word = id('word'+idname);
    var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
    if(word_string != undefined)
    {
        word_string = word_string.replace(/[\n]/ig,'');
        word.innerText = word_string;
        var word_lenth = word_string.length;
        if(word_lenth < 6)
            word.style.fontSize = "26px";
        else
            word.style.fontSize = "23px";
    }
    else
    {
        word.innerText = "";
    }

    if(img_bili > (width/height))
    {
        img.style.backgroundSize = height*img_bili + 'px '+ height + 'px';
        img.style.backgroundPosition = -((height*img_bili-width)/2)+'px 0px';
        // img.style.top = '0px';
        // img.style.height = height + 'px';
        // img.style.width = height*img_bili + 'px';
        // img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.backgroundSize = width + 'px '+ width/img_bili + 'px';
        img.style.backgroundPosition = '0px ' +(-((width/img_bili-height)/2)) + 'px';
        // img.style.left = '0px';
        // img.style.width = width+'px';
        // img.style.height = width/img_bili + 'px';
        // img.style.top = -((width/img_bili-height)/2) + 'px';
    }
    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}


var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=9000;
var timeout = [];
var showfont = false;



function id (name) 
{
    return document.getElementById(name);
}

//ÿ��ִ�м��غ�10��ͼƬ
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //��������X��
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}

function load_images()
{ 
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    // loading_first(); 
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }

    }
}

function setpage(pageindex)
{
    for(var i =1 ; i< 7;i++)
    {
        if(i != pageindex)
        {
            id('page' + i).style.display = 'none';
            if(pageindex == 1)
            {
                id('page6').style.display = 'block';
            }
            else
                id('page'+(pageindex-1)).style.display = 'block';
        }
        else
        {
            id('page' + i).style.display = 'block';

        }

    }
}
call_me(load_images)

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}


function clearnode()
{
    for(var i=0; i<timeout.length;i++)
    {
        clearTimeout(timeout[i])
    }

    for(var i = 1;i<7;i++)
    {
        id('page'+i).style.display = 'none';
    }

    id('pagetitle').style.display = 'block';
    id('pagetitle').style.webkitAnimation = '';
    id('dai1').style.webkitAnimation = '';
    id('love520').style.webkitAnimation = '';
    id('heart1').style.webkitAnimation = '';
    id('heart2').style.webkitAnimation = '';
    id('heart3').style.webkitAnimation = '';
    id('heart4').style.webkitAnimation = '';
    id('heart5').style.webkitAnimation = '';
    id('dai1').style.webkitClipPath = 'polygon(180px 0px,180px 146px,180px 146px,180px 0px)';

}
</script>